<template>
  <div class="flex flex-col">
    <!-- <div class="mb-2 flex justify-end">
      <a-button type="primary" class @click="add">{{ $t( 'user.verification-code.required1115661103') }}</a-button>
    </div> -->
    <a-card
      class="flex-1 rounded overflow-x-auto"
      :body-style="{ padding: '12px 16px', height: '100%' }"
      :bordered="false"
    >
      <div class="mb-2 flex justify-end">
        <a-button type="primary" icon="plus" @click="add">{{
          $t("user.verification-code.required1115661103")
        }}</a-button>
      </div>
      <a-table
        ref="table"
        size="middle"
        class="h-full"
        :dataSource="list"
        :pagination="pagination"
        @change="tableChange"
        :loading="listLoading"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
      >
        <a-table-column key="YtId" data-index="YtId" width="150">
          <span slot="title">{{
            $t("user.verification-code.required111566197")
          }}</span>
        </a-table-column>
        <a-table-column
          key="YtRoleName"
          :title="$t('user.verification-code.required1115661109')"
        >
          <template slot-scope="text, record">
            <span>{{ isLang ? record.YtRoleName : record.YtRoleNameEn }}</span>
          </template>
        </a-table-column>
        <a-table-column key="YtRoleName" data-index="YtRoleName" width="150">
          <span slot="title">{{
            $t("user.verification-code.required111566198")
          }}</span>
        </a-table-column>
        <a-table-column
          key="YtRoleCreatetime"
          data-index="YtRoleCreatetime"
          width="150"
        >
          <span slot="title">{{
            $t("user.verification-code.required111566199")
          }}</span>
        </a-table-column>
        <a-table-column
          key="YtRoleFunctionName"
          :title="$t('user.verification-code.required1115661100')"
          width="150"
        >
          <!-- <span slot="title">{{ $t('user.verification-code.required1115661100') }}</span> -->
          <template slot-scope="record">
            <template v-if="isLang == true">
              <template v-if="record.YtRoleFunctionName.length > 0">
                <a-tag
                  v-for="tag in record.YtRoleFunctionName"
                  :key="tag"
                  color="green"
                  >{{ tag }}</a-tag
                >
              </template>
              <template v-else>
                <span>{{ isLang ? "无" : "Not have" }}</span>
              </template>
            </template>
            <template v-else-if="isLang == false">
              <template v-if="record.YtRoleFunctionNameEn.length > 0">
                <a-tag
                  v-for="tag in record.YtRoleFunctionNameEn"
                  :key="tag"
                  color="green"
                  >{{ tag }}</a-tag
                >
              </template>
              <template v-else>
                <span>{{ isLang ? "无" : "Not have" }}</span>
              </template>
            </template>
          </template>
        </a-table-column>
        <a-table-column
          key="YtRoleStatus"
          data-index="YtRoleStatus"
          width="150"
        >
          <span slot="title">{{ $t("user.v16") }}</span>
          <template slot-scope="text, record">
            <a-switch
              default-checked
              :checked="text == 1"
              @change="changeStatus(record.YtId)"
              :loading="record.YtId == roleId"
            />
          </template>
        </a-table-column>
        <a-table-column key="action" :title="$t('app.setting.othersettings')">
          <template slot-scope="text, record">
            <span>
              <a-button type="link" block @click="edit(record)">{{
                $t("menu.exception.server-error")
              }}</a-button>
              <a-popconfirm
                :title="$t('user.verification-code.required111566110577225')"
                :ok-text="$t('user.v15')"
                :cancel-text="$t('user.email.required11')"
                @confirm="() => del(record.YtId)"
              >
                <a-button type="link" block>{{
                  $t("menu.exception.trigger")
                }}</a-button>
              </a-popconfirm>
            </span>
          </template>
        </a-table-column>
      </a-table>
    </a-card>
    <save-role ref="save" @succeed="init" />
  </div>
</template>

<script>
import { getRoleList, deleteRole, changeRoleStatus } from "@/api/index";
import SaveRole from "./components/save.vue";
const columns = [
  {
    title: "角色ID",
    className: "min-w-90p",
    dataIndex: "YtId",
    align: "center",
    scopedSlots: { customRender: "YtId" },
  },
  {
    title: "角色名",
    className: "min-w-120p",
    dataIndex: "YtRoleName",
    align: "center",
    scopedSlots: { customRender: "YtRoleName" },
  },
  {
    title: "创建时间",
    className: "min-w-120p",
    dataIndex: "YtRoleCreatetime",
    align: "center",
    scopedSlots: { customRender: "YtRoleCreatetime" },
  },
  {
    title: "关联功能",
    className: "min-w-120p",
    dataIndex: "YtRoleFunctionName",
    align: "center",
    scopedSlots: { customRender: "YtRoleFunctionName" },
  },
  {
    title: "角色状态",
    className: "min-w-120p",
    dataIndex: "YtRoleStatus",
    align: "center",
    scopedSlots: { customRender: "YtRoleStatus" },
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    width: "150px",
    scopedSlots: { customRender: "action" },
  },
];
export default {
  components: { SaveRole },
  data() {
    return {
      columns,
      isLang: true,
      /**分页 */
      pagination: {
        current: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
        showTotal: (total) =>
          this.$t(
            "",
            { total },
            "user.verification-code.required111566110577217"
          ),
      },
      /**table数据 */
      list: [],

      //表格Loading
      listLoading: false,
      //抽屉提交按钮loading
      loading: false,
      roleId: 0,
    };
  },
  mounted() {
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      if (e.key == "lang") {
        let lang = JSON.parse(e.value);
        console.log(lang);
        if (lang == "zh-EN") {
          that.isLang = false;
          console.log("this.isLang", this.isLang);
        } else {
          that.isLang = true;
          console.log("this.isLang", this.isLang);
        }
      }
    });
  },
  methods: {
    init() {
      this.pagination.current = 1;
      this.getList();
    },
    //分页
    tableChange(pagination) {
      this.pagination = pagination;
      this.getList();
      console.log("tableChange");
    },
    /**
     * 获取列表
     */
    async getList() {
      this.listLoading = true;
      const { current, pageSize } = this.pagination;
      try {
        const { data } = await getRoleList({
          ...{ page: current, pageSize },
          ...this.searchForm,
        });
        const { Page, PageSize, Total, Lists } = data;
        this.list = Lists || [];
        this.pagination = {
          current: Page,
          pageSize: PageSize,
          total: Total,
        };
      } catch (error) {
        this.$message.error(error);
      } finally {
        this.listLoading = false;
      }
    },
    add() {
      this.$refs.save.open(0);
    },
    // 编辑
    edit(record) {
      this.$refs.save.open(1, record);
      console.log(record);
    },
    /**
     * 切换状态
     * @param {*} roleId
     */
    async changeStatus(roleId) {
      try {
        this.roleId = roleId;
        await changeRoleStatus({
          roleId,
        });
        this.$message.success(
          this.$t("user.verification-code.required111566110577254")
        );
        this.init();
      } catch (error) {
        this.$message.error(error);
      } finally {
        this.roleId = 0;
      }
    },
    /**
     * 删除
     * @param {*} key
     */
    async del(roleId) {
      try {
        await deleteRole({
          roleId,
        });
        this.$message.success(
          this.$t("user.verification-code.required111566110577133")
        );
        this.init();
      } catch (error) {
        this.$message.error(error);
      } finally {
      }
    },
  },
  created() {
    this.pagination.current = 1;
    this.getList();
  },
};
</script>
<style lang="less" scoped>
/deep/.ant-table-row-cell-last {
  text-align: center !important;
}
</style>
